<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prop</title>

    <script src="./../vue/vue.js"></script>
    <style>

        .outer{
            border: 1px solid red;
            height: 100px;
        }
        .inner{
            border: 1px solid blue;
        }
    </style>
</head>
<body>

    <!-- 
        Props
            1、属性名大小写不敏感，建议使用 短线分隔法

            2、props: value 值可以是字符串数组；也可以是一个对象，其中对象中的value对应的是类型
                需要通过 : 告诉vue 后面带的是一个表达式而不是一个 字符串
                
                "即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue"
            
            3、使用 v-bind="model" 传入一个对象给组件

            4、 单向数据流 可以传递 Object 或者数组类型 来做双向数据流传递 类似  函数的参数传递，值传递和引用传递

            5、Prop 验证
            
            6、props 还可以包含 自定义的 类型 因为其是引用类型

            7、非 Props 的属性 会被直接添加到组件上。
                一般的属性会被外界的属性直接替换掉
                class 和 style 则会合并 
            
        [重要] 8、禁用属性继承特性 inheritAttrs: false 以及 将使用 $attrs 将属性绑定给指定的组件





     -->
    <div id="app">
        <!-- <component-div message="你好" :number="12312" :is-boy="true" :hobbys="['篮球','足球']"></component-div> -->
        <component-div :model="model" class="outer"></component-div>

        <!-- prop 验证 -->
        <custom-component name="hhh" :age="12" :sex="true" :model="customModel" aaa="99999"></custom-component>

        <div>
            <div>{{ customInputValue }}</div>
            <custom-input id="input1" placeholder="这里输入1" v-model="customInputValue"></custom-input>
        </div>
        <custom-input id="input2" placeholder="这里输入2"></custom-input>
        
    </div>

    <script>
        
        Vue.component("component-div",{
            inheritAttrs: false,
            // props: ["message"],
            props: {
                message: String, 
                number: Number,
                isBoy: Boolean,
                hobbys: Array,
                model: Object
            },
            data: function(){
                return {
                    value: this.number
                }
            },
            computed:{
                
            },
            template: `
            <div class="inner" @click="model.number += 1">{{ message }} {{ model.number }} {{ hobbys }} {{ isBoy }}</div>
            `,
            
        })

        Vue.component("custom-component",{
            props: {
                name: {
                    type: String,
                    required: true
                },
                age: {
                    type: Number,
                    required: true
                },
                // required 添加是否必选 。 默认时 非必选
                sex: {
                    type: Boolean,
                    required: true
                },
                // default 设置默认值
                money: {
                    type: Number,
                    default: 100
                },
                // 引用类型设置默认值时需要 用 工厂方法返回 次 组件唯一的引用对象
                model: {
                    type: Object,
                    default: function(){
                        return {
                            name: "小名",
                            age: 15,
                            sex: true,
                            money: 12
                        }
                    }
                }
            },
            template: `
            <div>
                <div>
                    {{ name }},
                    {{ age }},
                    {{ sex }},
                    {{ money }}
                </div>
                <div>
                    {{ JSON.stringify(model) }}
                </div>
            </div>
            `
        })

        Vue.component("custom-input",{
            inheritAttrs: false,
            props: ["value"],
            data: function(){
                return {

                }
            },
            template: `
            <div>
                <label :for="$attrs.id">私人input组件</label>
                <input type="text" :id="$attrs.id" :placeholder="$attrs.placeholder" :value="value" @input="$emit('input',$event.target.value)">
            </div>
            `,
            computed: {
                inputId(){
                    var Num = "";
                    for (var i = 0; i < 6; i++) {
                        Num += Math.floor(Math.random() * 10);
                    }
                    return Num;
                }
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                number: 78465,
                model: {
                    message: "牛逼",
                    number: 5555,
                    isBoy: true
                },
                customModel:{
                    name: "小名---fdasf",
                    age: 144,
                    sex: false,
                    money: 5000
                },
                customInputValue:null
            },
            methods: {
                
            },
        })
    </script>

</body>
</html>